<template>
    <div>
        <el-dialog
                title="上传资料详细说明"
                :visible.sync="showIllustrate"
                width="80%"
                center>
            <p>
                <span class="detail">
                   1、资料数量最多只能30份, 多余30份请于线下邮寄。<br/><br/>
                </span>
                <span class="detail">
                    2、为方便管理人审核您的债权，建议您用铅笔对您的债权材料编号，再按顺序拍照上传。<br/><br/>
                </span>
            </p>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showIllustrate = false">确  定</el-button>
            </span>
        </el-dialog>
        <el-table
                :data="fileList"
                border
                style="width: 100%"
                @cell-click="showPDF">
            <el-table-column
                    prop="name"
                    label="原申报资料">
            </el-table-column>
        </el-table>

        <el-table
                v-if="newFileList.length != 0"
                :data="newFileList"
                border
                style="width: 100%"
                @cell-click="showImage">
            <el-table-column
                    prop="name"
                    label="新申报资料">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="105">
                <template slot-scope="scope">
                    <el-button @click="deleteFile(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row :gutter="20">
            <el-col :span="5">
                <upload-file style="margin-right: 16%;float: right" @getFileList="uploadFile"></upload-file>
            </el-col>
            <el-col :span="10">
                <el-button type="text" @click="showAllImage">查看新上传资料</el-button>
            </el-col>
            <el-col :span="5">
                <el-button type="text" @click="showIllustrate = true">上传资料说明
                </el-button>
            </el-col>
        </el-row>
        <div style="margin-top: 5%; width: 100%; text-align: center">
            <el-button type="primary" @click="previousPage" style="margin-right: 5%; margin-left: 5%;width: 39%">上一页
            </el-button>
            <el-button type="primary" @click="nextPage" style="margin-right: 5%; margin-left: 5%; width:39%">提  交
            </el-button>
            <span style="font-size: 12px; float: right; color: red">填写内容将作为您确认的送达方式</span>
        </div>
        <el-dialog
                title="新上传资料"
                :visible.sync="showNewFile"
                width="90%"
                center>
            <template>
                <el-carousel indicator-position="none" :autoplay="false" arrow="always" :interval="100000"
                             @change="onImageChange">
                    <el-carousel-item v-for="file in newFileList" :key="file.id">
                        <img :src="file.url" style="width: 100%; height: 100%"/>
                    </el-carousel-item>
                </el-carousel>
                <div style="text-align: center; width: 100%; margin-top: 10px">
                    <span>{{imageIndex}}/{{imageTotal}}</span>
                </div>
            </template>
        </el-dialog>
        <el-dialog
                title="原申报材料"
                :visible.sync="pdfVisible"
                width="95%"
                center>
            <!--<el-carousel indicator-position="none" :autoplay="false" arrow="always" :interval="100000"
                         @change="onPDFChange">
                <el-carousel-item v-for="i in total" :key="i">
                    <pdf :key="i"
                         :src="pdfUrl"
                         :page="i"
                         style="width: 100%"></pdf>
                </el-carousel-item>
            </el-carousel>-->
            <pdf-shower :url="pdfUrl"></pdf-shower>
            <!--<div style="text-align: center; width: 100%; margin-top: 10px">
                <span>{{imageIndex}}/{{imageTotal}}</span>
            </div>-->
        </el-dialog>
    </div>
</template>

<script>
    import UploadFile from 'components/upload/upload-button-text_3.vue'
    import PdfShower from 'components/pdf/pdf-shower.vue'
    import util from 'assets/js/util.js'
    import conf from 'assets/js/conf.js'

    export default {
        data() {
            return {
                showIllustrate: false,
                showNewFile: false,
                pdfVisible: false,
                total: 0,
                pdfUrl: '',
                imageIndex: 0,
                imageTotal: 0,
                fileList: [],
                newFileList: [],
                oldDeclaerFileids: ''
            }
        },
        props: [
            'form'
        ],
        mounted() {
            this.oldDeclaerFileids = this.form.declaerFileids;
            const _self = this;
            util.ajax({
                url: '/file/getFileList',
                params: {eids: this.oldDeclaerFileids},
                success: function (data) {
                    let count = 0;
                    data.data.forEach(_file => _self.fileList.push({
                        id: _file.id,
                        name: '申报资料 ' + (++count),
                        // path: conf.baseUrl + 'file/' + _file.path,
                        // updateDate: util.formatDate(_file.updateDate),
                        url: conf.baseUrl + '/file/get/' + _file.id + '?type=1'
                    }));
                    _self.form.declaerFileids = "";
                },
            });
        },
        methods: {
            uploadFile: function (file) {
                if (this.newFileList.length > 30) {
                    alert('资料数量太多了, 请于线下邮寄');
                    return;
                }
                this.newFileList.push({
                    id: file.id,
                    count: this.newFileList.length + 1,
                    name: '新申报资料 ' + (this.newFileList.length + 1),
                    // updateDate: util.formatDate(file.updateDate),
                    url: conf.baseUrl + '/file/get/' + file.id + '?type=1'
                });
                this.imageTotal++;
                if (this.form.declaerFileids === '')
                    this.form.declaerFileids = file.id;
                else
                    this.form.declaerFileids = this.form.declaerFileids + ',' + file.id;
            },
            nextPage: function () {
                if (this.oldDeclaerFileids !== '') {
                    if (this.form.declaerFileids !== '')
                        this.form.declaerFileids = this.oldDeclaerFileids + ',' + this.form.declaerFileids;
                    else
                        this.form.declaerFileids = this.oldDeclaerFileids + ',';
                }
                this.$emit('nextPage', this.form);
            },
            previousPage: function () {
                this.$emit('previousPage', this.form);
            },
            onImageChange: function (index) {
                this.imageIndex = index + 1;
                this.imageTotal = this.newFileList.length;
            },
            onPDFChange: function () {

            },
            showImage: function (row, column, cell, event) {
                if (column.label !== '操作') {
                    this.imageIndex = row.count;
                    this.imageTotal = this.newFileList.length;
                    this.showNewFile = true;
                }
            },
            showAllImage: function () {
                this.imageIndex = 1;
                this.imageTotal = this.newFileList.length;
                this.showNewFile = true;
            },
            showPDF: function (row, column, cell, event) {
                this.pdfUrl = row.url;
                this.pdfVisible = true;
            },
            deleteFile: function (row) {
                this.newFileList.splice(row.count - 1, 1);
                this.form.declaerFileids = '';
                if (this.newFileList.length > 1) {
                    this.newFileList.forEach(_file => this.form.declaerFileids += _file.id + ',');
                    this.form.declaerFileids = this.form.declaerFileids.substring(0, this.form.declaerFileids.length - 1);
                }
                let count = 0;
                this.newFileList.forEach(_file => {
                    _file.name = '新申报资料 ' + (++count);
                    _file.count = count;
                })
            }
        },
        components: {
            UploadFile,
            PdfShower
        }
    }
</script>

<style>
    .dialog-title {
        font-size: large;
        color: black;
    }

    .detail {
        font-size: small;
        color: dimgray;
    }

    .el-col {
        text-align: center;
    }

    .el-form-item__label {
        line-height: 0
    }
</style>
